window.addEventListener('load', function () {
    //1.左右按钮显示与隐藏
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        //鼠标经过，清空计时器
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        //鼠标离开，重新打开计时器
        timer = setInterval(function () {
            //手动调用右侧按钮点击事件
            arrow_r.click();
        }, 2000)

    })
    //2.动态生成小圆圈
    var pics = focus.querySelector('ul');
    var circle = focus.querySelector('.circle');
    for (var i = 0; i < pics.children.length; i++) {
        //循环创建
        var li = this.document.createElement('li');
        //给每个小圆圈设置编号，方便我们滑动图片
        li.setAttribute('index', i);
        circle.appendChild(li);
        //3.给每个小圆圈绑定点击事件(排他思想)
        li.addEventListener('click', function () {
            for (var i = 0; i < circle.children.length; i++) {
                circle.children[i].className = '';
            }
            this.className = 'current';//选中效果
            //4.点击小圆圈 相应图片会滑动 滑动的是ul(注意了！！！)
            //滑动的距离等于装图片盒子的大小（即focus的大小)，也相当于图片的大小*index 注意这里是左滑 所以是负值
            // var focusWidth = focus.offsetWidth;
            var index = this.getAttribute('index');
            //将当前下标值给circleNum
            circleNum = index;
            //将当前下标值给picNum
            picNum = index;
            animate(pics, -index * focusWidth);
        })
    }
    //设置默认第一个有选中效果
    circle.children[0].className = 'current';

    //将第一张图片克隆一份添加到后面,这样可以自动添加，不用手动添加
    var cloneFistPic = pics.children[0].cloneNode(true);
    pics.appendChild(cloneFistPic);

    //5.给右侧按钮点击事件，每点击1次，滚动一次图片
    var picNum = 0;//标志图片滚动到第几张
    var circleNum = 0;//标志小圆圈滚动到第几个
    var flag = true;//节流阀 避免因为连续快速点击右侧按钮导致轮播图播放过快
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //这里设置五张图片 其中第一张和最后一张相同 
            //当跳到最后一张图片的时候，不做动画，快速地跳回第一张，实现无缝滚动
            if (picNum == pics.children.length - 1) {
                pics.style.left = 0;
                picNum = 0;//重头开始

            }
            picNum++;
            animate(pics, -focusWidth * picNum, function () {
                //利用回调函数修改flag变量
                flag = true;
            })
            //6.小圆圈随右箭头的滚动效果
            circleNum++;//每点击一次右箭头自增1
            if (circleNum == circle.children.length) {
                //如果circleNum == 4 说明走到了最后一张克隆的图片 则复原
                circleNum = 0;
            }
            for (var i = 0; i < circle.children.length; i++) {
                //清空所有小圆圈类名
                circle.children[i].className = '';
            }
            circle.children[circleNum].className = 'current';
        }
    })

    //给左侧按钮点击事件，每点击1次，滚动一次图片
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //如果当前为第一张图片
            if (picNum == 0) {
                //点击左侧按钮则变为第四张
                picNum = pics.children.length - 1;
                pics.style.left = -picNum * focusWidth + 'px';

            }
            picNum--;
            animate(pics, -focusWidth * picNum, function () {
                flag = true;
            })
            //6.小圆圈随右箭头的滚动效果
            circleNum--;//每点击一次右箭头自减1
            if (circleNum < 0) {
                //如果circleNum < 0 说明下次跳到最后一个小圆圈
                circleNum = circle.children.length - 1;
            }
            for (var i = 0; i < circle.children.length; i++) {
                //清空所有小圆圈类名
                circle.children[i].className = '';
            }
            circle.children[circleNum].className = 'current';
        }
    })


    //自动轮播图片 相当于点击了右侧按钮
    var timer = this.setInterval(function () {
        //手动调用右侧按钮点击事件
        arrow_r.click();
    }, 2000)


})